<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" scrollable :activeStyle="{
			             color: '#ff0000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="tabList" @change="tabChage" v-if="tabsFlag"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top ffffff radius" @click="jumpdetail(item.id)" v-for="item in list.data"
				:key="item.id">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="titletext hong_text bold">#{{item.call_no}}/{{item.id}}</view>
						<view class="lan_text margin_left1 main_size" v-if="item.shopstaff_info">
							製單者：{{item.shopstaff_info.name}}
						</view>
					</view>
					<view class="main_size hong_text" v-show="item.status==0">待接單</view>
					<view class="main_size hong_text" v-show="item.status==1">待服務</view>
					<view class="main_size hong_text" v-show="item.status==87">未付定金</view>
					<view class="main_size hong_text" v-show="item.status==3">待完成</view>
					<view class="main_size hong_text" v-show="item.status==5">製作中</view>
					<view class="main_size hong_text" v-show="item.status==6">待出貨</view>
					<view class="main_size hong_text" v-show="item.status==4">未付尾款</view>
					<view class="main_size hong_text" v-show="item.status==88">已放棄</view>
					<view class="main_size lv_text" v-show="item.status==99">已完成</view>
				</view>
				<view class="margin_top2 flexbetween xiaohui">
					<view>{{item.order_sn}}</view>
					<view>{{secondDate(item.createtime,0,0)}}</view>
				</view>
				<view class="margin_top2 flexbetween" v-if="item.opentype!=-1">
					<view class="flexleft">
						<view class="lanlable" v-if="item.opentype==0">紙本</view>
						<view class="lanlable" v-if="item.opentype==1">載具</view>
						<view class="lanlable" v-if="item.opentype==2">統編</view>
						<view class="lanlable" v-if="item.opentype==3">捐贈</view>
						<view v-if="item.tbcode" class="bold xiaolan margin_left1 ershib">{{item.tbcode}}</view>
					</view>
					<div class="flexright" v-if="item.fpinfo && item.opentype!=-1">
						<text class="weikailist" v-if="item.fpinfo && item.fpinfo.is_ly==1">未列印</text>
						<text class="yikailist" v-if="item.fpinfo && item.fpinfo.is_ly==2">已列印</text>
						<view class="bold  ershib margin_right1" :class="item.fpinfo.status==3?'xiaohong':'xiaolan'">
							發票號碼：{{item.fpinfo.invoice_number}}</view>
						<view class="xiaohong bold ershib" v-if="item.fpinfo.status==3">作廢</view>
					</div>
				</view>
				<view class="flexleft margin_top2" v-if="item.name || item.phone">
					<u-icon name="account" color="#ff8505" size="16"></u-icon>
					<view class="hei_text main_size margin_left1"><text v-if="item.name">{{item.name}}</text> <text class="margin_left1" v-if="item.phone">{{maskMiddle(item.phone)}}</text></view>
				</view>
				<view class="margin_top2 flexleft" v-if="item.address">
					<u-icon name="map" color="#ff8505" size="16"></u-icon>
					<text class="hei_text main_size margin_left1">{{item.address}}</text>
				</view>
				<view class="flexbetween margin_top2" v-if="item.yuetime || item.address || item.phone">
					<view class="flexleft" v-if="item.yuetime">
						<u-icon name="clock" color="#ff8505" size="16"></u-icon>
						<view class="hei_text main_size margin_left1">{{secondDate(item.yuetime,0,0)}}</view>
					</view>
					<view class="flexleft">
						<image @click.stop="daohang(item.address)" v-if="item.address" class="shopPhone"
							src="@/static/image/system/navigation.png" mode="">
						</image>
						<image v-if="item.phone" class="shopPhone margin_left1"
							src="@/static/image/system/phoneShop.png" mode="" @click.stop="phone(item.phone)"></image>
					</view>
				</view>
				
				<view class="flexleft" v-if="item.images">
					<view class="itemimgBox flexcenter margin_top2" v-for="(value,i) in item.images_text" :key="i"
						@click.stop="lbtpriview(i,item.images_text)">
						<image class="listleftimg radius" :src="value" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top" v-if="item.image">
					<view class="xiaohei main_size">定金支付憑證</view>
					<image class="listleftimg1 radius" :src="item.image_text" mode=""
						@click.stop="lbtpriview(0,[item.image_text])"></image>
				</view>
				<view class="flexbetween margin_top" v-if="item.image1">
					<view class="xiaohei main_size">尾款支付憑證</view>
					<image class="listleftimg1 radius" :src="item.image1_text" mode=""
						@click.stop="lbtpriview(0,[item.image1_text])"></image>
				</view>
				<view class="beizhubgc margin_top2 xiaohui" v-if="item.content">{{item.content}}</view>
				<view class="xiaohui margin_top bold textright">
					合計：
					<text class="xiaohuang">${{item.count_money || 0}}</text>
					<text>，訂金：${{item.d_money || 0}}</text>
					<text>，已付：${{item.pay_price}}，</text>
					<text class="xiaohong">未付：${{Number(item.count_money) - Number(item.pay_price)}}</text>
				</view>
				<view class="flexright flex-wrap margin_top">
					<view class="listbtnhui" @click.stop="shareOrder(item.id)" v-if="item.status!=88">分享訂單</view>
					<view class="listbtnhui" @click.stop="returnstatus(item.id)" v-if="item.status==88">轉定金</view>
					<view class="listbtnhui margin_left1" v-show="item.status==0 ||item.status==3 || item.status==87"
						@click.stop="cancelOrder(item.id)">放棄訂單</view>
					<view class="listbtnhuang margin_left1" v-show="item.status==0" @click.stop="takingOrder(item.id)">
						確認接單</view>
					<view class="listbtnhuang margin_left1" v-show="item.status==1" @click.stop="startService(item.id)">
						開始服務</view>
					<view class="listbtnhui margin_left1" v-show="item.status==87 || item.status==4 || item.status==99"
						@click.stop="hjlieyin(item.id)">列印</view>
					<view class="listbtnhuang margin_left1" v-show="item.status==87" @click.stop="enddjOrdercall(item)">
						確認訂金</view>
					<view class="listbtnhuang margin_left1" v-show="item.status==3"
						@click.stop="selectService(item.id)">選擇服務</view>
					<view class="listbtnhuang margin_left1" v-show="item.status==87"
						@click.stop="selectService(item.id)">訂單修改</view>
					<view class="listbtnhuang margin_left1" v-show="item.status==4" @click.stop="overService(item)">
						確認尾款</view>
					<view class="listbtnhui margin_left1" v-show="item.status==99">查看詳情</view>
					<!-- <view class="listbtnhui" @click.stop="invoicedetail">发票明細</view> -->
					<!-- <view class="listbtnhuang margin_left1" v-show="item.status==99 && item.is_ping">查看评价</view> -->
				</view>
			</view>
		</view>
		<u-modal :show="showConfirm" showCancelButton confirmColor="#ffb800" @cancel="showConfirm=false"
			confirmText="確認" cancelText="取消" @confirm="orderConfirm">
			<view class="slot-content color_ling text_weight text">
				{{text}}
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "callorderzj",
		data() {
			return {
				tabList: [{
					name: '待接單',
					badge: {
						value: 0,
					}
				}, {
					name: '待完成',
					badge: {
						value: 0,
					}
				}, {
					name: '待定金',
					badge: {
						value: 0,
					}
				}, {
					name: '製作',
					badge: {
						value: 0,
					}
				}, {
					name: '出貨',
					badge: {
						value: 0,
					}
				}, {
					name: '待尾款',
					badge: {
						value: 0,
					}
				}, {
					name: '已完成',
					badge: {
						value: 0,
					}
				}, ],
				tabsId: 0,
				showConfirm: false,
				text: "你確定要放棄此訂單嗎？",
				page: 1,
				list: {
					data: []
				},
				shop_id: uni.getStorageSync("shop_id"),
				id: "", //操作的订單id
				tabsFlag: false,
				shopInfo: {}
			}
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.http.request("/api/shop/Shopdeail", "POST", {
					shop_id: uni.getStorageSync("shop_id"),
				}).then(res => {
					this.shopInfo = res.data
				})
			},
			shareOrder(id) {
				let that = this
				if (navigator.share) {
					navigator.share({
							title: "呼叫訂單",
							text: that.shopInfo.ordercall_share_title,
							url: "https://opos.tw/pages_order/shopCreateCall?id=" + id, // 當前頁面 URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			componentInit() {
				console.log("呼叫訂單初始化成功");
				this.getList()
				this.tabsFlag = false
				this.tabsFlag = true
			},
			getorderMsg() {
				this.http.request('/api/Ordercall/orderData', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res => {
					this.tabList[0].badge.value = res.data.djd_num //待接單
					this.tabList[1].badge.value = res.data.fwz_num //待完成
					this.tabList[2].badge.value = res.data.wfdj_num //未付定金
					this.tabList[3].badge.value = res.data.zzz_num //製作
					this.tabList[4].badge.value = res.data.dch_num //出貨
					this.tabList[5].badge.value = res.data.wfwk_num //未付尾款
				})
			},
			async getList(isPage, page) {
				this.getorderMsg()
				this.$emit("zjchange", "")
				let obj = {
					"0": 0, //待接單
					"1": 3, // 待完成 
					"2": 87, //未付定金
					"3": 5, //製作>>>>
					"4": 6, //出貨>>>>
					"5": 4, //未付尾款
					"6": "88,99", //已完成
					"7": "", //全部
				}
				let res = await this.http.request('/api/Ordercall/listOrdercall', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id,
					status: obj[this.tabsId]
				})
				if (res.code == 1) {
					res.data.data.forEach(item => {
						this.$set(item, "images_text", [])
						if (item.images) {
							item.images.split(",").forEach(value => {
								value = this.imgUrlUser + value
								item.images_text.push(value)
							})
						}
					})
					let resList = res.data;
					let dataList = this.list;
					if (isPage == true) {
						this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						this.list.data = resList.data;
					}
				} else if (res.code == 0) {
					this.list.data = []
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			onReachBottomZj() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必須要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			tabChage(e) {
				this.tabsId = e.index
				this.getList()
			},
			cancelOrder(id) { //放弃订單
				this.id = id
				this.showConfirm = true
			},
			async orderConfirm() { //確認放弃订單
				let res = await this.http.request('/api/Ordercall/endOrdercall', 'POST', {
					id: this.id
				})
				if (res.code == 1) {
					this.http.toast("放棄成功")
					this.getList()
				} else {
					this.http.toast(res.msg)
				}
				this.showConfirm = false
			},
			async returnstatus(id){
				let res = await this.http.request('/api/Ordercall/zdjOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("轉定金成功")
					this.getList()
				} else {
					this.http.toast(res.msg)
				}
			},
			async takingOrder(id) { //確認接單
				let res = await this.http.request('/api/Ordercall/addOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("接單成功")
					this.getList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			hjlieyin(id) {
				this.http.request('/api/Ordercall/lyOrderCall', 'POST', {
					id
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("列印成功")
					} else {
						this.http.toast(res.msg)
					}
				})
			},
			async startService(id) { //開始服務
				let res = await this.http.request('/api/Ordercall/fwOrdercall', 'POST', {
					id
				})
				if (res.code == 1) {
					this.getList()
				} else {
					this.http.toast(res.msg)
				}

			},
			enddjOrdercall(item) { //確認訂金
				if (item.image) {
					this.http.modal('提示', "是否確認訂金", true, (resp) => {
						if (resp) {
							this.http.request('/api/Ordercall/enddjOrdercall', 'POST', {
								id: item.id
							}).then(res => {
								if (res.code == 1) {
									this.http.toast("操作成功")
									this.getList()
								} else {
									this.http.toast(res.msg)
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/callOutOrder/callsk?id=" + item.id + "&total_price=" + item.d_money
					})
				}
			},
			async overService(item) { //確認尾款
				if (item.image1) {
					this.http.modal('提示', "是否確認尾款", true, (resp) => {
						if (resp) {
							this.http.request('/api/Ordercall/enddjOrdercall', 'POST', {
								id: item.id
							}).then(res => {
								if (res.code == 1) {
									this.http.toast("操作成功")
									this.getList()
								} else {
									this.http.toast(res.msg)
								}
							})
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/callOutOrder/callsk?id=" + item.id + "&total_price=" + item.w_money
					})
				}
			},
			selectService(id) { //選擇服務
				uni.setStorageSync("order_call_id", id)
				uni.navigateTo({
					url: "/pages/callOutOrder/xuanzefw?type=1"
				})
			},
			jumpdetail(id) { //订單详情
				uni.navigateTo({
					url: "/pages/callOutOrder/dingdanxq?id=" + id
				})
			},
			invoicedetail() { //发票明細
				uni.navigateTo({
					url: "/pages/callOutOrder/fapiaomx"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.beizhubgc {
		padding: 15rpx 30rpx;
		background-color: #f8f8f8;
		border-radius: 15rpx;
	}
</style>